<template>
    <v-layout>
      <v-flex md2>
        <v-list>
          <v-list-tile avatar v-for="(item, i) of routeList" :key="i" @click="onListClicked(item)">
            <v-list-tile-content>
              <v-list-tile-title >{{ item.value }}</v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>
        </v-list>
      </v-flex>
      <v-flex md10>
        <router-view />
      </v-flex>
    </v-layout>
    <!-- <v-layout wrap justify-center align-center>
      <v-flex md12>
        <div class="mission-container">
          <div class="image-wrapper">
            <img :src="mission.productImg" alt />
          </div>
          <div class="info-wrapper elevation-2">
            <div class="title-wrapper">{{ mission.titleEnglish }}</div>

            <div class="info-detail flexbox column">
              <div class="text-left">
                <span class="title-color">Price:</span>
                <span>$ {{ mission.price }}</span>
              </div>
              <div class="text-left">
                <span class="title-color">Reward:</span>
                <span>$ {{ mission.commission ? mission.commission.toFixed(2) : '' }}</span>
              </div>
              <div class="text-left">
                <span class="title-color">Shop:</span>
                <span>$ {{ mission.shopName }}</span>
              </div>
            </div>
          </div>

          <div class="detail-desc">
            <div class="title">Mission Details</div>

            <div class="desc-content">
              <ul class="desc-list">
                <li>
                  1.Please search the keyword "
                  <em class="emp">{{ mission.keyword }}</em> "on the given platform: "
                  <em class="emp">{{ mission.platform | Platform }}</em>"
                </li>
                <li>
                  2. Normally you could find our product "on the 1st page", if not, please continue checking until you find our listing. "Asin:
                  <em class="emp">{{ mission.productAsin }}</em>
                </li>
                <li>3 Please don't go directly to product page anyhow. Please browse other listings as well and then add our product to cart after several minutes, then check out.</li>
                <li>
                  4. last step, Please double check if the ASIN of the product is the same as the one provided by the merchant to avoid buying the wrong product. Asin:
                  <em class="emp">{{ mission.productAsin }}</em>
                </li>
                <li>5. Please test the products and leave in the given platform a review about your feedback with no less than 1 pictures around 2 days after your receipt of the product.</li>
                <li>We believe your comments on the products will Mission great helps for the merchandiser brand broadcasting. You are encouraged to write a message here to the brand through busibusy if you have more suggestions on products. Much thanks again for your participation of the MBTP (Manufacturer's brand test program).</li>
              </ul>
            </div>
          </div>
        </div>
      </v-flex>
    </v-layout> -->
</template>


<script lang="ts">
// 使用类装饰器
import { Component, Vue } from "vue-property-decorator";
import { State, Action, Mutation, Getter, namespace } from "vuex-class";
const userModule = namespace('userModule');
declare const $Vue: Vue;

@Component
export default class My extends Vue {
  @userModule.Action('logoutFN') logoutFN: any;
 
  private routeList: Array<any> = [{
    name: 'MyWallet',
    value: 'My Wallet',
  }, {
    name: 'MyMissions',
    value: 'My Missions',
  }, {
    name: 'ReferFriend',
    value: 'Refer A Friend',
  }, {
    name: 'Settings',
    value: 'Settings',
  }, {
    name: 'Qna',
    value: 'Q&A',
  }, {
    name: 'SignOut',
    value: 'Sign Out',
  }, ]

  protected mounted() {

  }

  private onListClicked(item: any) {
    if (item.name === 'SignOut') {
      return this.logoutFN();
    }
    this.$router.push({name: item.name})
  }

}
</script>

<style lang="less" scoped>
@import url(../../styles/variables.less);

.mission-container {
  width: 100%;
  height: 100%;
  padding: 0.4rem 1rem;
  box-sizing: border-box;
  .image-wrapper {
    height: 10rem;
    img {
      max-height: 100%;
      max-width: 100%;
    }
  }
  .info-wrapper {
    border-radius: 9px;
    padding: 9px;
    .title-wrapper {
      height: auto;
      width: 100%;
    }
  }
}

.info-detail {
  .text-left {
    text-align: left;
  }
}

em.emp {
  color: #f44556;
}
.detail-desc {
  .title {
    font-size: 1.3rem;
    margin-top: 1rem;
  }
}
.desc-content {
  padding: 0.3rem;
  ul {
    padding-top: 1rem;
    li {
      text-align: left;
      margin: 0.8rem 0;
    }
  }
}
</style>


